<template>
  <div>
    <div style="margin-bottom: 20px">
      <el-button @click="addResidence">新增小区</el-button>
    </div>
    <el-row>
      <el-col
        v-for="(residence, index) in residenceList"
        :key="residence.id"
        :span="6"
        :offset="index > 0 ? 2 : 0"
      >
      <el-card
        class="card-container"
        :class="{ 'card-selected': selectedResidenceIndex === index }"
      >
        <div class="card-content"
             style="width: 100%;height: 100%;"
             @click="selectResidence(index)">
          <div class="image-wrapper">
            <img :src="residence.picture || 'https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png'" class="image">
            <div class="number">编号：{{ residence.id }}</div>
          </div>
          <div class="info-wrapper">
            <span class="title" style="font-size: 20px">{{ residence.name }}</span>
            <span>{{ residence.address }}</span>
            <div class="bottom-info" style="margin-top: 10px;margin-bottom: 10px">
              <b>辖区：</b>
            </div>
            <div class="bottom-info">
              <b>居民楼：</b>
              <span>{{ residence.buildingCount }}栋</span>
            </div>
            <div class="bottom-info">
              <b>住户：</b>
              <span>{{ residence.houseCount }}户</span>
            </div>
          </div>
        </div>
      </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { getSqResidenceList } from '@/api/system/residence'

export default {
  data(){
    return {
      // 遮罩层
      loading: true,
      residenceList: [],
      // 表格树数据
      deptList: [],
      // 是否展开，默认全部展开
      isExpandAll: true,
      selectedResidenceIndex: 0,
      sqResidenceRequest:{
        name: "",
        pageNum: 1,
        pageSize: 9,
      }
    }
  },
  methods: {
    getResidenceList() {
      getSqResidenceList(this.sqResidenceRequest).then(response => {
        this.residenceList = response.data
      })
    },
    addResidence(){

    },
    selectResidence(index) {
      this.selectedResidenceIndex = index; // 更新选中的卡片索引
    }
  },
  created() {
    this.getResidenceList()
  },
}

</script>

<style scoped>
.card-selected {
  /* 选中卡片的样式，例如边框颜色变化、背景颜色变化等 */
  border: 2px solid #409EFF; /* Element UI的主题色 */
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.card-container {
  width: 470px;
  display: flex;
  flex-direction: column; /* 保持卡片内容的垂直布局 */
  align-items: center; /* 如果需要，可以垂直居中 */
  justify-content: center; /* 如果需要，可以水平居中（但在这个案例中不是必需的） */
  padding: 16px; /* 给卡片内部添加一些内边距 */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* 添加卡片阴影，使样式更美观 */
  border-radius: 8px; /* 添加圆角 */
  background-color: #fff; /* 设置背景颜色 */
}

.card-content {
  display: flex;
  align-items: center; /* 保持子元素垂直居中（在这个案例中可能不是必需的，因为我们有具体的布局） */
  width: 100%;
}

.image-wrapper {
  flex: 0 0 auto; /* 图片容器占据固定空间 */
  margin-right: 16px; /* 图片和信息之间的间距 */
}

.image {
  max-width: 150px; /* 限制图片的最大宽度 */
  max-height: 150px; /* 限制图片的最大高度，保持宽高比可以通过object-fit处理 */
  object-fit: cover; /* 保持图片的纵横比并填充容器 */
  border-radius: 8px; /* 添加圆角 */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 添加图片阴影 */
}

.info-wrapper {
  flex: 1 1 auto; /* 信息容器占据剩余空间 */
  display: flex;
  flex-direction: column; /* 信息内容垂直排列 */
  align-items: flex-start; /* 信息内容从左侧开始排列 */
}

.title {
  font-size: 16px; /* 设置标题字体大小 */
  font-weight: bold; /* 设置标题字体加粗 */
  margin-bottom: 8px; /* 标题和底部信息之间的间距 */
}

.bottom-info {
  display: flex;
  align-items: center; /* 底部信息垂直居中 */
}

.time {
  margin-right: 16px; /* 时间和按钮之间的间距 */
  color: #999; /* 设置时间颜色 */
}

.operation-button {
  color: #409EFF; /* 设置按钮颜色 */
  text-decoration: none; /* 去除按钮的下划线 */
}

/* 其他样式可以根据需要调整 */
.card-container {
  /* 卡片的基础样式 */
}

.card-selected {
  /* 选中卡片的样式，例如边框颜色变化、背景颜色变化等 */
  border: 2px solid #409EFF; /* Element UI的主题色 */
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.image-wrapper {
  position: relative;
}

.number {
  position: absolute;
  bottom: 10px;
  left: 10px;
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  padding: 5px;
  border-radius: 3px;
}

.info-wrapper {
  padding: 10px;
}

.bottom-info {
  margin-top: 5px;
}
</style>
